<template>
	<article>
		<div class="search" v-title="'浏览失宠'">
			<input type="text" v-model="keyword" placeholder="猫   狗   其他   位置或关键字" @blur="getData">
			<span class="icon icon-search" @click="getData"></span>
			<!-- <div class="option" :class="{active: active == i}" v-for="(v, i) in navList">
				<img :src="v.img" @click="tabs(i, v.zd)">
				<span>{{v.name}}</span>
			</div>
			<div class="liuyan" @click="$router.push('/msg')">
				<img src="../../assets/img/liuyan.png">
			</div> -->
		</div>
		<div class="content">
			<ul v-if="list.length > 0">
				<li v-for="v in list" v-if="v.bq != 3">
					<div class="box"  @click="info(v.cwid)">
						<div class="left">
							<img :src="v.tp">
						</div>
						<div class="right">
							<h5>{{v.title}}</h5>
							<small>{{v.ms}}</small>
							<div class="intro">
								<div> 丢失地点： <span>{{v.addr}}</span></div>
								<div> 丢失时间： <span>{{v.sj}}</span></div>
								<div> 宠物品种： <span>{{v.pz}}</span></div>
								<div> 宠物特征： <span>{{v.tz}}</span></div>
							</div>
						</div>
						<img class="status" :src="v.bq == 1 ? require('../../assets/img/running.png'):require('../../assets/img/finish.png')"></img>
					</div>
					<div class="footer">
						<!-- <span  @click="msgBol=true">留言</span> -->
						<span class="sj">赏金：<p>{{v.xsje}}</p></span>
						<span  @click="msgBol1(v.cwid)">留言</span>
						<span @click="contactsFn(v.sjh, v.wxzh)">联系他</span>
					</div>
				</li>
			</ul>
			<div v-else class="empty">
				<img src="../../assets/img/empty.png">
			</div>
		</div>
		<div class="wrap" v-if="msgBol">
			<div class="box">
				<h4>留言</h4>
				<img src="../../assets/img/close.png" class="close" @click="msgBol = false"/>
				<div class="content">
					<textarea placeholder="请发表您的留言" v-model="intro"></textarea>
				</div>

				<mt-button type="primary" size="large" @click="submit">发表</mt-button>
			</div>
		</div>
		<mt-actionsheet :actions="actions" v-model="contacts" cancelText="取消"></mt-actionsheet>
		<Loading></Loading>
	</article>
</template>

<script type="text/javascript">
	import { MessageBox } from 'mint-ui'
	import Loading from '../loading/loading'
	export default {
		components: { Loading },
		data () {
			return {
				keyword: '',
				number: 5,
				scrollTop: 0,
				scrollBol: true,
				msgBol: false,
				intro: '',
				list: [],
				len: 0,
				pageindex: 1,

				contacts: false,
				actions: []
			}
		},
		created () {

			console.log(this.list.length)
			this.$store.state.wrap = false;
			this.$store.state.info = false;
			window.addEventListener('scroll', this.loadMore);
			this.getData()
		},
		methods: {
			msgBol1(id){
				this.msgBol = true
				// alert(id)
				this.cwid = id
			},
			submit () {
				// alert(this.cwid)
				if (!this.intro) {
					MessageBox("请输入留言信息");
					return;
				}
				this.axios.get(this.$store.state.hostname + 'cw/savely.do',{
					yhid: this.ls.getItem('userID'),
					// cwid: this.$route.params.id,
					cwid: this.cwid,
					lynr: this.intro
				}).then( res => {
					console.log(res)
					MessageBox("留言成功");
					this.intro = "";
					this.msgBol = false
				})
			},
			info (id) {
				this.$router.push({path: '/petInfo/' + id})
			},
			loadMore () {
				if (!this.scrollBol) {
					this.$store.state.loading = false;
					return false
				}
				console.log(this.scrollBol)
				var self = this;
				if (document.body.scrollTop >= document.body.clientHeight - window.innerHeight) {
					this.$store.state.loading = true;
					if (!this.$store.state.isLoading) {
						this.$store.state.isLoading = true;
						this.pageindex ++;
						this.getData()
					}

				}
			},
			contactsFn (tel, wxzh) {
				this.actions = [
					{
						name: "手机：" + tel,
						method: function(){
							window.location.href = "tel:" + tel
						}
					},
					// {
					// 	name: "微信：" + wxzh,
					// 	method: function(){
							// window.location.href = "tel://" + tel
						// }
					// }
					{
						name: "微信：" + wxzh,
						method: function(){
							MessageBox("请长按复制微信号添加好友");
						}
					}
				]
				this.contacts = true;
			},
			getData () {
				this.axios.get(this.$store.state.hostname + 'cw/getdscwlist.do',{
					addr: this.keyword,
					pageindex: this.pageindex
				}).then( res => {
					console.log(res)
					this.cwid = res.cwid;
					if (res.list.length < 10) {
						this.scrollBol = false;
					}
					if (this.pageindex > 1) {
						this.list = this.list.concat(res.list);
					}else{
						this.list = res.list;
					}
					console.log(this.list)
					this.$store.state.isLoading = false;
					// console.log(this.list)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	article {
		.wrap {
			position: fixed;
			width: 100%;
			height: 100%;
			left:0;top:0;
			background: rgba(0,0,0,0.5);
			display:flex;
			align-items: center;
			justify-content:center;
			text-align: center;


			.box {
				width: 3rem;
				background: #fff;
				padding:0.1rem;
				position: relative;
				border-radius: 0.1rem;
				h4 {
					color: #555;
				}
				.close {
					position: absolute;
					right:0.1rem;top:0.1rem;
					width: 0.2rem;
				}
				.content {
					textarea {
						width: 100%;
						height: 0.7rem;
						margin-top:0.1rem;
						margin-bottom: 0.1rem;
						resize: none;
						font-size:0.12rem;
						text-indent: 1em;
						padding:0.05rem 0;
						border-radius: 0.03rem;
					}
				}

				// .box-intro {
				// 	>*{
				// 		vertical-align: middle;
				// 		display: inline-block;
				// 		text-align: right;
				// 	}
				// }
				// img {
				// 	width: 0.3rem;
				// }
				// span {
				// 	display: inline-block;
				// 	font-size: 0.12rem;
				// 	margin:0 0.05rem;
				// }
			}
		}
		// background: #F5F5F5;
		.empty {
			margin-top: 0.2rem;
			border-top:1px solid #eee;
			img {
				width: 0.7rem;
				display: block;
				margin:0.2rem auto;
			}
		}
		.search {
			width: 100%;
			background: #8BC7D1;
			height: 0.5rem;
			display:flex;
		  	align-items:center;
		  	justify-content: center;
		  	position: relative;
			// .option {
			// 	background: transparent;
			// 	padding:0.03rem 0.1rem;
			// 	margin:0 0.1rem;
			// 	border-radius:0.1rem;
			// 	border:1px solid #eee;
			// 	color: #ccc;
			// 	img {
			// 		width: 0.25rem;
			// 		vertical-align: middle;
			// 	}
			// 	span {
			// 		margin-left:0.05rem;
			// 		vertical-align: middle;
			// 	}
			// }
			// .liuyan {
		  // 		border-radius:0.1rem;
	  	// 		color: #ccc;
	  	// 		position: absolute;
	  	// 		right:0.1rem;top:50%;
	  	// 		transform: translateY(-50%);
		  // 		img {
		  // 			width: 0.25rem;
		  // 			vertical-align: middle;
		  // 		}
			// }

			input {
				vertical-align: middle;
				border: none;
				width: 3rem;
				height: 0.35rem;
				line-height: 0.3rem;
				margin-top:0.02rem;
				margin-left:0.1rem;
				text-indent: 0.5em;
			}

			span {
				vertical-align: middle;
				display: inline-block;
				width: 0.4rem;
				height: 0.35rem;
				margin:0.02rem 0 0 0.1rem;
				line-height: 0.35rem;
				text-align: center;
				background: #fff;
				color: #8BC7D1;
				font-weight: bold;
				font-size: 0.2rem;
			}
		}

		.content {
			// background: #F5F5F5;
			li {
				width: 100%;
				margin-bottom:0.15rem;
			    box-shadow:0px 0px 0.05rem #969696;
			    background: #fff;
			    .box {
			    	padding:0.1rem 0;
			    	position: relative;

			    	.status {
			    		width: 0.4rem;
			    		position: absolute;
			    		top:60%;right: 0.2rem;
			    		transform: translateY(-50%);
			    	}

			    	.left, .right {
						display: inline-block;
						vertical-align: middle;
					}
				    .left {
				    	width: 1.2rem;
						text-align: center;
				    	img {
				    		width: 60%;
				    	}
				    }
				    .right {
				    	width: 2.3rem;

				    	h5 {
				    		line-height: 0.2rem;
				    	}

				    	small {
				    		color:#bbb;
				    		line-height: 0.14rem;
				    		font-size: 0.12rem;
				    	}

				    	.intro {
				    		margin-top:0.1rem;
				    		font-size:0.14rem;

				    		div {
				    			line-height: 0.18rem;
				    			color: #555;

				    			span {

				    				color: #bbb;
				    			}
				    		}
				    	}
				    }

				    &:after {
						content: '';
						position: absolute;
						width: 100%;
						top:100%;left:0;
						border-bottom:1px solid #ccc;
						transform: scale(1,0.5);
					}

			    }

				.footer {
					text-align: right;
					font-weight: bold;
					padding:0.1rem;
					color: #D55D52;

					span {
						margin-left:0.2rem;
					}
					.sj{
						width: 2rem;
						float: left;
						text-align: left;
						color: #000;
						p{
							display: inline;
							color: red;
						}
					}
				}
			}
		}
	}
</style>
